<template>
  <transition name="food">
    <div class="food" v-show="showFlag" ref="food">
      <div>
        <div class="food-content">
          <div class="image-header">
            <img :src="food.image" alt="">
            <i class="iconfont icon-back" @click="hide"></i>
          </div>
          <div class="content">
            <h1 class="title">{{food.name}}</h1>
            <div class="detail">
              <span class="sell-count">月售{{food.sellCount}}份</span>
              <span class="rating">好评率{{food.rating}}%</span>
            </div>
            <div class="price">
              <span class="now">￥{{food.price}}</span>
              <span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
            </div>
            <div class="cartcontrol-wrapper">
              <cartcontrol :food="food" @cart-add="addFood"></cartcontrol>
            </div>
            <transition name="addFirst">
              <div @click="addFirst" class="buy" v-show="!food.count || food.count===0">加入购物车</div>
            </transition>
          </div> 
          <split v-show="food.info"></split>
          <div class="info" v-show="food.info">
            <h1 class="title">商品信息</h1>
            <p class="text">{{food.info}}</p>
          </div>
          <split></split>  
          <div class="rating">
            <h1 class="title">商品评价</h1>
          </div>
          <ratingselect :select-type="selectType" :only-content="onlyContent" :desc="desc" :ratings="food.ratings" @select="selectRating" @toggle="toggleContent"></ratingselect>
          <div class="rating-wrapper">
            <ul v-show="food.ratings && food.ratings.length">
              <li v-show="needShow(rating.rateType,rating.text)" v-for="rating of food.ratings" class="rating-item">
                <div class="user">
                  <span class="name">{{rating.username}}</span>
                  <img class="avatar" width="12" height="12" :src="rating.avatar" alt="">
                </div>
                <div class="time">{{rating.rateTime | formatDate}}</div>
                <p class="text">
                  <i class="iconfont" :class="{'icon-good':rating.rateType===0,'icon-bad':rating.rateType===1}"></i>{{rating.text}}
                </p>
              </li>
            </ul>
            <div class="no-rating" v-show="!food.ratings || !food.ratings.length">暂无评价</div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import Bscroll from 'better-scroll'
import Vue from 'vue'
import cartcontrol from '@/components/cartcontrol/cartcontrol.vue'
import split from '@/components/split/split.vue'
import ratingselect from '@/components/ratingselect/ratingselect.vue'
import {formatDate} from '@/common/js/date.js'

const POSITIVE=0
const NEGATIVE=1
const All=2
export default{
  props:{
      food:Object
  },
  components:{
    cartcontrol,
    split,
    ratingselect
  },
  data(){
      return{
          showFlag:false,
          selectType:All,
          onlyContent:false,
          desc:{
            all:'全部',
            positive:'推荐',
            negative:'吐槽'
          }
      }
  },
  methods:{
      show(){
          this.showFlag=true;
          this.selectType=All;
          this.onlyContent=true;
          this.$nextTick(()=>{
            if(!this.scroll){
              this.foodScroll=new Bscroll(this.$refs.food,{
                click:true
              })
            }else{
              this.scroll.refresh();
            }  
          })
      },
      hide(){
        this.showFlag=false
      },
      addFirst(event){
        this.$emit('cart-add', event.target); 
        Vue.set(this.food,'count',1)
      },
      addFood(){
        this.$emit('cart-add', event.target); 
      },
      selectRating(type){
        this.selectType=type
      },
      toggleContent(){
        this.onlyContent=!this.onlyContent
      },
      needShow(type,text){
        if(this.onlyContent && !text){
          return false
        }
        if(this.selectType===All){
          return true
        }else{
          return type===this.selectType
        }
      }
  },
  filters:{
    formatDate(time){
      let date=new Date(time)
      return formatDate(date,'yyyy-MM-dd hh:mm')
    }
  }
}
</script>

<style lang="stylus" scoped>
.food{position:fixed;left:0;top:0;bottom:48px;z-index:30;width:100%;background:#fff;transform:translate3d(0,0,0);}
.image-header{position:relative;width:100%;height:0;padding-bottom:100%;}
.image-header img{position:absolute;left:0;top:0;width:100%;height:100%;}
.icon-back{position:absolute;top:10px;left:0;display:inline-block;padding:10px;font-size:20px;color:#fff;}
.content{padding:18px;position:relative;}
.content .title{line-height:14px;margin-bottom:8px;font-size:14px;font-weight:700;color:rgb(7,17,27);}
.content .detail{margin-bottom:18px;line-height:10px;font-size:0;height:10px;}
.content .detail .sell-count,.content .detail .rating{font-size:10px;color:rgb(147,153,159);}
.content .detail .sell-count{margin-right:12px;}
.content .price{font-weight:700;line-height:24px;}
.content .price .now{margin-right:18px;font-size:14px;color:rgb(240,20,20);}
.content .price .old{text-decoration:none;font-size:10px;color:rgb(147,153,159);}

.content .cartcontrol-wrapper{position:absolute;right:18px;bottom:18px;}
.content .buy{position:absolute;right:18px;bottom:18px;z-index:10;height:24px;line-height:24px;padding:0 12px;box-sizing:border-box;font-size:10px;border-radius:12px;color:#fff;background:rgb(0,160,220);}

.food-enter-active, .food-leave-active{transition: all 0.2s linear;}
.food-enter, .food-leave-active{transform:translate3d(100%,0,0);}
.addFirst-enter-active, .addFirst-leave-active{transition: all 0.2s;}
.addFirst-enter, .addFirst-leave-active{opacity:0;z-index: -1;}

.info{padding:18px;}
.info .title{line-height:14px;margin-bottom:16px;font-size:14px;color:rgb(7,17,27);}
.info .text{color:rgb(77,85,93);line-height:24px;padding:0 8px;font-size:12px;}
.rating{padding-top:18px;}
.rating .title{line-height:14px;margin-left:18px;font-size:14px;color:rgb(7,17,27);}

.rating-wrapper{padding:0 18px;}
.rating-item{position:relative;padding:16px 0;border-bottom:0.5px solid rgba(7,17,27,0.1);}
.rating-item .user{position:absolute;right:0;top:16px;font-size:0;line-height:12px;}
.rating-item .user .name{display:inline-block;vertical-align:top;font-size:10px;color:rgb(147,153,159);margin-right:6px;}
.rating-item .user .avatar{border-radius:50%;}
.rating-item .time{font-size:10px;color:rgb(147,153,159);line-height:12px;margin-bottom:6px;}
.rating-item .text{line-height:16px;font-size:12px;color:rgb(7,17,27);}
.rating-item .text .iconfont{margin-right:4px;line-height:16px;font-size:12px;}
.rating-item .text .icon-good{color:rgb(0,160,220);}
.rating-item .text .icon-bad{color:rgb(147,153,159);}
.no-rating{padding:16px 0;font-size:12px;color:rgb(147,153,159);}

</style>
